<template>
  <view class="page">
    <u-sticky>
      <u-swiper
        :list="bannerList"
        indicator
        height="332rpx"
        radius="10"
        key-name="img"
        indicatorMode="dot"
        circular
      />
    </u-sticky>
    <Sub-title
      label="丘山阅故事集"
      bottom-color="#E9F4F4"
      right-text="查看更多"
      @clickRight="clickMore"
    />
    <view class="story-box">
      <Story-item v-for="(i, k) in storyList" :key="k" :item="i" @clickItem="clickItem" />
    </view>
    <u-empty
      v-if="storyList.length == 0"
      :icon="webSrc('/assets/web_img/empty.png')"
      width="162"
      height="162"
      text="暂无故事集"
      textColor="#bababa"
    />
    <Sub-title label="精选推荐" bottom-color="#E9F4F4" />
    <u-scroll-list :indicator="false">
      <view v-for="(i, k) in menuList" :key="k" class="menu-box" @click="handleTo(i)">
        <u-image
          show-loading
          :show-menu-by-longpress="false"
          :src="i.img"
          width="194rpx"
          height="234rpx"
          :radius="10"
        />
        <view class="menu-label">{{ i.name }}</view>
      </view>
    </u-scroll-list>
  </view>
</template>
<script>
import StoryItem from "@/components/qiu/StoryItem";

import { qiuBanner, qiuStory, qiuOther } from "@/request/qiuApi.js";
export default {
  components: { StoryItem },
  data() {
    return {
      bannerList: [], // 轮播图列表
      storyList: [], // 故事列表
      menuList: [], // 精彩推荐菜单列表
    };
  },
  onShow() {
    this.getBannerList();
    this.getDataList();
    this.getOtherList();
  },
  onPullDownRefresh() {
    this.getBannerList();
    this.getDataList("refresh");
    this.getOtherList();
  },
  methods: {
    // 获取banner图
    getBannerList() {
      qiuBanner().then((res) => {
        if (res.code == 1) {
          this.bannerList = res.data;
        }
      });
    },
    // 获取数据列表
    getDataList(v) {
      let data = {
        page: 1,
        pageSize: 4,
        type: "qsy",
      };
      qiuStory(data)
        .then((res) => {
          if (res.code == 1) {
            this.storyList = res.data.list;
          }
        })
        .finally(() => {
          if (v) {
            uni.showToast({
              title: "刷新成功",
              icon: "success",
            });
            uni.stopPullDownRefresh();
          }
        });
    },
    // 获取精彩推荐功能列表
    getOtherList() {
      let tlist = ["xmjs", "sq", "zbjd", "zshz"];
      qiuOther().then((res) => {
        if (res.code == 1) {
          let list = [];
          tlist.forEach((i) => {
            list.push(res.data.find((m) => m.type == i));
          });
          this.menuList = list;
        }
      });
    },
    // 处理跳转
    clickMore() {
      uni.navigateTo({ url: "/pages/qiu/storyList" });
    },
    // 故事详情
    clickItem(i) {
      uni.navigateTo({ url: "/pages/qiu/storyDetail?id=" + i.id });
    },
    // 菜单详情
    handleTo(i) {
      if (i.type == "xmjs") {
        uni.navigateTo({ url: "/pages/qiu/introduction" });
      } else if (i.type == "sq") {
        uni.navigateTo({ url: "/pages/parse/index?type=community" });
      } else if (i.type == "zbjd") {
        uni.navigateTo({ url: "/pages/qiu/aroundScenic" });
      } else if (i.type == "zshz") {
        uni.navigateTo({ url: "/pages/parse/picture?type=cooperate" });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  padding: 20rpx;
  .story-box {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(2, 49%);
    grid-gap: 15rpx;
  }
  .menu-box {
    position: relative;
    margin-right: 20rpx;
    .menu-label {
      font-family: "PingFang SC";
      position: absolute;
      bottom: 20rpx;
      left: 0;
      right: 0;
      text-align: center;
      color: #fff;
      font-size: 24rpx;
    }
  }
}
</style>
